<template>
    <div>
        <BasicDialogVue :data="syncDialog" @close="onCloseSyncDialog(syncDialogRef)">
            <template #content>
                <div class="clue-container">
                    <el-form ref="syncDialogRef" :model="syncDialogForm" :rules="syncRules" label-width="100px">
                        <!-- <el-form-item label="同步类型：" prop="type">
                            <el-select clearable v-model="data.syncDialogForm.type">
                                <el-option
                                    v-for="itemOption in data.syncType"
                                    :key="itemOption.value"
                                    :label="itemOption.label"
                                    :value="itemOption.value"
                                />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="同步时间：" prop="datetimerange">
                            <el-config-provider :locale="locale">
                                <el-date-picker
                                    style="width: 340px"
                                    v-model="syncDialogForm.datetimerange"
                                    type="datetimerange"
                                    range-separator="到"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    date-format="YYYY/MM/DD ddd"
                                    :locale="locale"
                                    :disabled-date="limitDate"
                                    :default-time="defaultTime"
                                />
                            </el-config-provider>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="btn">
                    <el-button @click="onCloseSyncDialog(syncDialogRef)">取消</el-button>
                    <el-button type="primary" @click="submitSyncForm(syncDialogRef)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, reactive, watchEffect } from 'vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { clueSync } from '@/apis/clue'
import { formatTime } from '@/utils'
import { DICT_DATA } from '@/utils/dict-data'

const props = defineProps(['visible'])
const emit = defineEmits(['close'])

const locale = ref(zhCn)
const syncDialogRef = ref()
const start = new Date()
start.setDate(start.getDate() - 7)

const syncDialog = reactive({
    visible: false,
    title: '同步数据',
    width: '600px',
    type: 'create'
})
const defaultTime = reactive([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
const syncDialogForm = reactive({
    type: '1',
    datetimerange: []
})
const syncType = reactive<{ label: string; value: string }[]>(DICT_DATA.get('syncType'))

const syncRules = {
    datetimerange: [{ required: true, message: '请选择同步时间', trigger: 'change' }],
    type: [{ required: true, message: '请选择同步类型', trigger: 'change' }]
}

//限制选择的时间范围
const limitDate = (time: Date) => {
    return (
        time.getTime() > Date.now() ||
        time.getTime() <= new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0).getTime()
    )
}

watchEffect(() => {
    syncDialog.visible = props.visible
})

//监听同步弹窗关闭
const onCloseSyncDialog = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    syncDialog.visible = false
    emit('close')
}
//监听同步弹窗点击确定按钮
const submitSyncForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            clueSync({
                syncType: Number(syncDialogForm.type),
                endTime: formatTime(syncDialogForm.datetimerange[1]),
                startTime: formatTime(syncDialogForm.datetimerange[0])
            }).then(res => {
                if (Number(res.data.code) === 200) {
                    syncDialog.visible = false
                    formEl.resetFields()
                    ElMessage.success('同步成功')
                    emit('close')
                }
            })
        }
    })
}
</script>

<style scoped>
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
</style>
